<template>
	<view class="j-checkout-bar" v-if="show">
		<view class="summary-info">
			<view class="count-wrap">
				<view class="item-count">
					<text>件数：</text>
					<text class="item-count-text">{{ itemCount }}</text>
					<text>件</text>
				</view>
				<view class="total-price">
					<text>总计：</text>
					<text class="total-price-text">¥{{ totalPrice }}</text>
					<view class="details-btn" @click="handleDetailsClick">
						<text class="details-text">明细</text>
						<text class="details-arrow">▼</text>
					</view>
				</view>
			</view>
		</view>

		<view class="action-buttons">
			<view class="action-btn secondary" @click="handleSecondaryClick" v-if="showSecondary">
				{{ secondaryText }}
			</view>
			<view class="action-btn primary" :class="{ disabled: disabled }" @click="handlePrimaryClick">
				{{ primaryText }}
			</view>
		</view>
	</view>
	<view :style="{ height }"></view>
</template>

<script>
export default {
	name: 'JCheckoutBar',
	props: {
		// 是否显示组件
		show: {
			type: Boolean,
			default: true
		},
		// 商品件数
		itemCount: {
			type: Number,
			default: 0
		},
		// 总价格
		totalPrice: {
			type: [String, Number],
			default: '0.00'
		},
		// 主要按钮文字
		primaryText: {
			type: String,
			default: '结算下单'
		},
		// 次要按钮文字
		secondaryText: {
			type: String,
			default: '找人代付'
		},
		// 是否显示次要按钮
		showSecondary: {
			type: Boolean,
			default: false
		},
		// 是否禁用主要按钮
		disabled: {
			type: Boolean,
			default: false
		},
		height: {
			type: String,
			default: '110rpx'
		}
	},
	data() {
		return {};
	},
	methods: {
		// 明细按钮点击
		handleDetailsClick() {
			this.$emit('details-click');
		},

		// 次要按钮点击
		handleSecondaryClick() {
			this.$emit('secondary-click');
		},

		// 主要按钮点击
		handlePrimaryClick() {
			if (this.disabled) return;
			this.$emit('primary-click');
		}
	}
};
</script>

<style lang="less" scoped>
.j-checkout-bar {
	position: fixed;
	z-index: 200;
	bottom: var(--window-bottom);
	display: flex;
	align-items: center;
	width: 750rpx;
	height: v-bind(height);
	padding: 0 20rpx;
	padding-right: 0;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10rpx);
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
	justify-content: space-between;
	.summary-info {
		display: flex;
		align-items: center;
		.count-wrap {
			display: flex;
			flex-direction: column;
			margin-right: 50rpx;
			font-size: 28rpx;
			color: #000;
			.item-count {
				display: flex;
				align-items: center;

				.item-count-text {
					color: @basecolor;
				}
			}

			.total-price {
				display: flex;
				align-items: center;
				.total-price-text {
					font-size: 32rpx;
					color: #fa436a;
					font-weight: bold;
				}
			}
		}

		.details-btn {
			display: flex;
			align-items: center;
			margin-left: 20rpx;
			.details-text {
				font-size: 24rpx;
				color: #666;
				margin-right: 5rpx;
				color: @basecolor;
			}

			.details-arrow {
				font-size: 20rpx;
				color: #999;
				color: @basecolor;
			}
		}
	}

	.action-buttons {
		display: flex;
		// gap: 20rpx;
		height: 100%;
		.action-btn {
			padding: 20rpx 20rpx;
			// border-radius: 8rpx;
			font-size: 28rpx;
			text-align: center;
			min-width: 180rpx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;

			&.secondary {
				background: #fff;
				color: #fa436a;
				border: 1rpx solid #52c41a;
				position: relative;
				overflow: hidden;
				user-select: none;

				&:active {
					background: rgba(82, 196, 26, 0.2);
					transform: scale(0.95);
					border-color: darken(#52c41a, 10%);
					transition: all 0.1s ease;

					// 添加波纹效果
					&::before {
						content: '';
						position: absolute;
						top: 50%;
						left: 50%;
						width: 0;
						height: 0;
						border-radius: 50%;
						background: rgba(82, 196, 26, 0.3);
						transform: translate(-50%, -50%);
						animation: ripple 0.6s ease-out;
					}
				}
			}

			&.primary {
				background: @basecolor;
				color: #fff;
				position: relative;
				overflow: hidden;
				user-select: none;

				&:active {
					transform: scale(0.95);
					background: darken(@basecolor, 10%);
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
					transition: all 0.1s ease;

					// 添加波纹效果
					&::before {
						content: '';
						position: absolute;
						top: 50%;
						left: 50%;
						width: 0;
						height: 0;
						border-radius: 50%;
						background: rgba(255, 255, 255, 0.3);
						transform: translate(-50%, -50%);
						animation: ripple 0.6s ease-out;
					}
				}

				&.disabled {
					background: #d9d9d9;
					color: #999;
					transform: none;
					box-shadow: none;

					&:active {
						transform: none;
						background: #d9d9d9;
						box-shadow: none;
					}
				}
			}
		}
	}
}

// 波纹动画
@keyframes ripple {
	0% {
		width: 0;
		height: 0;
		opacity: 1;
	}
	100% {
		width: 200rpx;
		height: 200rpx;
		opacity: 0;
	}
}
</style>
